<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--extjs的样式-->
    <link href="resources/js/ext/classic/theme-triton/resources/theme-triton-all.css" type="text/css" rel="stylesheet"/>
    <!--extjs的核心库-->
    <script src="resources/js/ext/ext-all.js"></script>
    <!--国际化文件-->
    <script src="resources/js/ext/locale/ext-lang-zh_CN.js"></script>
    <script>

        Ext.onReady(function () {
            //建立一个store要使用的model
            Ext.define('Book', {
                extend: 'Ext.data.Model',
                fields: [
                    {name: 'bookId'},
                    {name: 'bookName'},
                    {name: 'bookCounts'},
                    {name: 'details'}
                ]
            });

            //数据源
            var myStore = Ext.create('Ext.data.Store', {
                model: 'Book',//使用User类作为模型
                pageSize: 5,//每页显示的数量
                proxy: {
                    type: 'ajax',
                    url: '/book/queryAllBooks',
                    reader: {
                        type: 'json',//返回类型
                        root: 'books'//从返回的结果中指定result属性作为数据集合
                    }
                },
                autoLoad: true//自动加载数据
            });

            //用户管理面板
            var gridPanel = Ext.create('Ext.grid.Panel', {
                title: '用户管理',
                forceFit: true,//列宽自适应
                columns: [
                    {xtype: 'rownumberer', width: 30, align: 'center'},//行号列
                    {header: '图书ID', dataIndex: 'bookId'},
                    {header: '图书名', dataIndex: 'bookName'},
                    {header: '图书数量', dataIndex: 'bookCounts'},
                    {header: '描述', dataIndex: 'details'}

                ],
                bbar: {xtype: 'pagingtoolbar', displayInfo: true, store: myStore},//底部工具栏：显示分页条
                height: 600,
                iconCls: 'user',//标题图标
                renderTo: Ext.getBody(),
                store: myStore,//引用数据源
                tbar: [{
                    xtype: 'button', text: '新增', iconCls: 'add', border: false, handler: function () {
                        //更新表单面板
                        var formPanel1 = Ext.create('Ext.form.Panel', {
                            bodyPadding: 30,
                            url: '/book/addBook',
                            //表单域Fields将被竖直排列, 占满整个宽度
                            layout: 'anchor',
                            defaults: {
                                anchor: '100%'
                            },
                            defaultType: 'textfield',//默认文本框
                            items: [{//列名
                                name: 'id',
                                hidden: true
                            }, {
                                fieldLabel: '图书名',
                                name: 'bookName',
                                allowBlank: false
                            }, {
                                name: 'bookCounts',
                                fieldLabel: '图书数量'
                            }, {
                                name: 'details',
                                fieldLabel: '图书描述'
                            }],

                            // 重置 和 保存 按钮.
                            buttons: [{
                                text: '重置',
                                handler: function () {
                                    this.up('form').getForm().reset();//重置表单
                                }
                            }, {
                                text: '保存',
                                formBind: true, //表单验证通过才可以点击按钮
                                disabled: true,
                                handler: function () {
                                    var form = this.up('form').getForm();
                                    if (form.isValid()) {
                                        form.submit({
                                            //返回的json中success返回true会执行success方法，否则执行failure
                                            success: function (form, action) {
                                                Ext.Ajax.request({
                                                    url: '/book/addBook',
                                                    params: {
                                                        // bookName:
                                                    },
                                                    success: function (response) {
                                                        var text = response.responseText;
                                                        // process server response here
                                                    }
                                                });
                                                Ext.Msg.alert('温馨提示', '操作成功！', function () {
                                                    formWindow1.close();//关闭窗口
                                                    myStore.reload();//重新加载store的数据
                                                });
                                            },
                                            failure: function (form, action) {
                                                Ext.Msg.alert('温馨提示', '操作失败!');
                                            }
                                        });
                                    }
                                }
                            }]
                        });

                        //更新表单窗口
                        var formWindow1 = Ext.create('Ext.window.Window', {
                            title: '更新图书',
                            height: 350,
                            width: 370,
                            layout: 'fit',//布局自适应
                            items: [formPanel1],//
                            closeAction: 'hide'//关闭窗口执行的默认是销毁，设置为隐藏
                        }).show();
                        //更新监听关闭窗口事件
                        formWindow1.on('close', function () {
                            //重置表单
                            formPanel1.getForm().reset();
                        });

                    }
                },
                    {
                        xtype: 'button', text: '编辑', iconCls: 'edit', border: false, handler: function () {
                            //更新表单面板
                            var formPanel = Ext.create('Ext.form.Panel', {
                                bodyPadding: 30,
                                url: '/book/updateBook',
                                //表单域Fields将被竖直排列, 占满整个宽度
                                layout: 'anchor',
                                defaults: {
                                    anchor: '100%'
                                },
                                defaultType: 'textfield',//默认文本框
                                items: [{//列名
                                    name: 'id',
                                    hidden: true
                                }, {
                                    fieldLabel: '图书Id',
                                    name: 'bookId',
                                    hidden: true,
                                    allowBlank: true
                                }, {
                                    fieldLabel: '图书名',
                                    name: 'bookName',
                                    allowBlank: false
                                }, {
                                    name: 'bookCounts',
                                    fieldLabel: '图书数量'
                                }, {
                                    name: 'details',
                                    fieldLabel: '图书描述'
                                }],

                                // 重置 和 保存 按钮.
                                buttons: [{
                                    text: '重置',
                                    handler: function () {
                                        this.up('form').getForm().reset();//重置表单
                                    }
                                }, {
                                    text: '保存',
                                    formBind: true, //表单验证通过才可以点击按钮
                                    disabled: true,
                                    handler: function () {
                                        var form = this.up('form').getForm();
                                        if (form.isValid()) {
                                            form.submit({
                                                //返回的json中success返回true会执行success方法，否则执行failure
                                                success: function (form, action) {
                                                    Ext.Ajax.request({
                                                        url: '/book/updateBook',
                                                        params: {
                                                            // bookName:
                                                        },
                                                        success: function (response) {
                                                            var text = response.responseText;
                                                            // process server response here
                                                        }
                                                    });
                                                    Ext.Msg.alert('温馨提示', '操作成功！', function () {
                                                        formWindow.close();//关闭窗口
                                                        myStore.reload();//重新加载store的数据
                                                    });
                                                },
                                                failure: function (form, action) {
                                                    Ext.Msg.alert('温馨提示', '操作失败!');
                                                }
                                            });
                                        }
                                    }
                                }]
                            });

                            //更新表单窗口
                            var formWindow = Ext.create('Ext.window.Window', {
                                title: '更新图书',
                                height: 350,
                                width: 370,
                                layout: 'fit',//布局自适应
                                items: [formPanel],//
                                closeAction: 'hide'//关闭窗口执行的默认是销毁，设置为隐藏
                            })

                            //更新监听关闭窗口事件
                            formWindow.on('close', function () {
                                //重置表单
                                formPanel.getForm().reset();
                            });
                            var selected = gridPanel.getSelectionModel().getSelection();//获取选中的数据
                            if (selected.length == 1) {
                                formPanel.getForm().loadRecord(selected[0]);//把数据回显到表单中
                                formWindow.show();//打开表单窗口
                            } else {
                                Ext.Msg.alert("温馨提示", "请选择一条数据！");
                            }
                        }
                    },
                    {
                        xtype: 'button', text: '删除', iconCls: 'delete', border: false, handler: function () {
                            var selected = gridPanel.getSelectionModel().getSelection();//获取选中的数据
                            if (selected.length == 1) {
                                Ext.Msg.show({//弹出确认框
                                    title: '警告',
                                    message: '是否确认删除该条记录?',
                                    buttons: Ext.Msg.YESNO,//确认框使用yes和no的按钮
                                    icon: Ext.Msg.WARNING,//确认框的图标
                                    fn: function (btn) {//点击按钮后触发的事件
                                        if (btn === 'yes') {//确认按钮
                                            Ext.Ajax.request({//发起ajax请求
                                                url: '/book/delBook',
                                                params: {
                                                    bookId: selected[0].data
                                                },
                                                success: function (response) {
                                                    var data = Ext.util.JSON.decode(response.responseText);//转换成json格式
                                                    if (data.success) {
                                                        Ext.Msg.alert("温馨提示", "操作成功！", function () {
                                                            myStore.reload();//重新加载store的数据
                                                        });
                                                    } else {
                                                        Ext.Msg.alert("温馨提示", "操作失败！");
                                                    }
                                                }
                                            });
                                        }
                                    }
                                });
                            } else {
                                Ext.Msg.alert("温馨提示", "请选择一条数据！");
                            }
                        }
                    },
                    {
                        xtype: 'button', text: '刷新', iconCls: 'reload', border: false, handler: function () {
                            myStore.reload();//重新加载store的数据
                        }
                    }]
            });


        })
    </script>
</head>
<body>
</body>
</html>